<template>
	<view class="Record">
		<view class="Record-1">
			<view class="wz-1" :class="{wz:index==current}" v-for="(item,index) in tab" :key="item" @tap="ter(index)">
				<text>{{item}}</text>
			</view>

		</view>
		<view class="Record-2">
			<swiper class="Record-2" @change="alter" :current="current">
				<!-- 借款 -->
				<swiper-item>
					<view class="moner-1">
						<view class="title-1">
							<text>2019/11/12 11:45:50</text>
						</view>
						<view class="title-2">
							<text class="wz-1">5000,00</text><br>
							<text class="wz-2">借款金额(元)</text>
						</view>
						<view class="title-3">
							<navigator class="button" url="#">查看详情</navigator>
						</view>
						<image class="im-1" src="../../static/borrow/borrom-1.png" mode=""></image>
					</view>
			
					<view class="moner-1">
						<view class="title-1">
							<text>2019/11/12 11:45:50</text>
						</view>
						<view class="title-2">
							<text class="wz-1">5000,00</text><br>
							<text class="wz-2">借款金额(元)</text>
						</view>
						<view class="title-3">
							<navigator class="button" url="#">查看详情</navigator>
						</view>
						<image class="im-1" src="../../static/borrow/borrom-2.png" mode=""></image>
					</view>
				</swiper-item>
				
				<!-- 还款 -->
				<swiper-item>
					<view class="moner-1">
						<view class="title-1">
							<text>2019/11/12 11:45:50</text>
						</view>
						<view class="title-2">
							<text class="wz-1">5000,00</text><br>
							<text class="wz-2">借款金额(元)</text>
						</view>
						<view class="title-3">
							<navigator class="button" url="#">查看详情</navigator>
						</view>
						<image class="im-1" src="../../static/borrow/borrom-3.png" mode=""></image>
					</view>
					<view class="moner-1">
						<view class="title-1">
							<text>2019/11/12 11:45:50</text>
						</view>
						<view class="title-2">
							<text class="wz-1">5000,00</text><br>
							<text class="wz-2">借款金额(元)</text>
						</view>
						<view class="title-3">
							<navigator class="button" url="#">查看详情</navigator>
						</view>
						<image class="im-1" src="../../static/borrow/borrom-4.png" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab: [`借款记录`, `还款记录`],
				current: 0
			}
		},
		methods: {
			alter(e) {
				this.current = e.detail.current
			},
			ter(index) {
				this.current = index

			}
		}
	}
</script>

<style scoped lang="scss">
	.Record {
		width: 750rpx;

		box-sizing: border-box;

		.Record-1 {
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: space-around;

			.wz-1 {
				font-size: 40rpx;
				font-weight: 600;
				line-height: 100rpx;
			}

			.wz {
				font-size: 40rpx;
				font-weight: 600;
				line-height: 100rpx;
				color: #3775f6;
				border-bottom: 3px solid #3775f6;
			}
		}

		.Record-2 {
			width: 100%;
			height: 100vh;
			padding: 0rpx 40rpx;

			.moner-1 {
				margin-top: 40rpx;
				width: 100%;
				height: 200rpx;
				padding: 0rpx 20rpx;
				display: flex;
				flex-wrap: wrap;
				position: relative;

				.title-1 {
					width: 100%;
					height: 60rpx;
					border-bottom: 1px solid #e9e9e9;
					line-height: 60rpx;
					color: #cfcfcf;
				}

				.title-2 {
					width: 60%;
					height: 120rpx;

					.wz-1 {
						font-size: 50rpx;
						font-weight: 1000;
						color: #e74d45;
					}

					.wz-2 {
						color: #cfcfcf;
					}

				}

				.title-3 {
					width: 40%;
					height: 120rpx;
					padding-top: 10%;

					.button {
						margin-left: 30%;
						text-align: center;
						line-height: 50rpx;
						color: #cfcfcf;
						width: 50%;
						height: 50rpx;
						border-radius: 25rpx;
						border: 1px solid #cfcfcf;
					}
				}

				.im-1 {
					position: absolute;
					right: 75rpx;
					width: 100rpx;
					height: 120rpx;
				}
			}
		}

	}
</style>
